<template>
	<view class="login-container">
		<!-- 自定义导航栏 - 添加返回按钮 -->
		<view class="custom-navbar">
			<view class="nav-title">用户登录</view>
			<view class="nav-right"></view>
		</view>

		<view class="login-content">
			<!-- logo/欢迎语 -->
			<view class="login-header">
				<image class="logo" src="/static/img/avatar.png" mode="aspectFit"></image>
				<text class="welcome-text">欢迎登录</text>
			</view>

			<!-- 登录表单 -->
			<view class="login-form">
				<view class="form-item">
					<text class="item-label">账号</text>
					<input class="item-input" type="text" placeholder="请输入用户名" v-model="username" />
				</view>

				<view class="form-item">
					<text class="item-label">密码</text>
					<input class="item-input" type="password" placeholder="请输入密码" v-model="password" />
				</view>

				<button class="login-btn" :class="{active: username && password}" @click="handleLogin">登录</button>

				<view class="divider">
					<text class="divider-text">或使用以下方式登录</text>
				</view>

				<view class="social-login">
					<view class="social-item wechat">
						<text class="social-icon"></text>
						<text class="social-text">微信</text>
					</view>
					<view class="social-item qq">
						<text class="social-icon"></text>
						<text class="social-text">QQ</text>
					</view>
				</view>
			</view>

			<view class="register-tip">
				还没有账号? <text class="register-link" @click="navigateToRegister">立即注册</text>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				username: '',
				password: '',
				remember: false
			}
		},
		methods: {
			async request(url, method = 'GET', data = {}) {
				return new Promise((resolve, reject) => {
					uni.request({
						url: 'http://localhost:8080' + url, // 根据实际后端地址修改
						method,
						data,
						header: {
							'Content-Type': 'application/json'
						},
						success: (res) => {
							resolve(res.data)
						},
						fail: (err) => {
							reject(err)
						}
					})
				})
			},
			
			async handleLogin() {
				// 表单验证
				if (!this.username) {
					uni.showToast({
						title: '请输入用户名',
						icon: 'none'
					});
					return;
				}

				if (!this.password) {
					uni.showToast({
						title: '请输入密码',
						icon: 'none'
					});
					return;
				}

				// 显示加载中
				uni.showLoading({
					title: '登录中...',
					mask: true
				});

				try {
					const params = {
						username: this.username,
						password: this.password
					};

					const result = await this.request('/user/login', 'POST', params);
					console.log('登录响应:', result);

					// 隐藏加载
					uni.hideLoading();

					// 处理登录结果 - 根据实际API响应结构调整
					if (result.code === 200 && result.data) {
						// 登录成功
						uni.showToast({
							title: result.msg || '登录成功',
							icon: 'success'
						});

						// 存储用户信息 - 存储data中的用户信息
						uni.setStorageSync('userInfo', result.data);
						console.log('已存储用户信息:', result.data);

						// 更新全局状态
						if (this.$store) {
							this.$store.commit('setUserInfo', result.data);
						}

						// 返回上一页
						setTimeout(() => {
							uni.navigateBack();
						}, 1500);
					} else {
						// 登录失败
						uni.showToast({
							title: result.msg || '登录失败，请检查账号密码',
							icon: 'none'
						});
					}
				} catch (error) {
					// 隐藏加载
					uni.hideLoading();

					// 网络错误或服务器错误
					console.error('登录请求失败:', error);
					uni.showToast({
						title: '网络错误，请稍后重试',
						icon: 'none'
					});
				}
			},
			navigateToRegister() {
						// 跳转到登录页面
						setTimeout(() => {
							uni.redirectTo({
								url: '/pages/register/register'
							});
						}, 1500);
			}
		}
	}
</script>

<style>
	.login-container {
		background-color: #f8f8f8;
		min-height: 100vh;
	}

	.custom-navbar {
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 0 30rpx;
		height: 88rpx;
		background-color: #fff;
		position: sticky;
		top: 0;
		z-index: 10;
	}

	.nav-left {
		display: flex;
		align-items: center;
		width: auto;
		margin-top: 120rpx;
	}

	.back-icon {
		font-size: 50rpx;
		color: #333;
		margin-right: 10rpx;
	}

	.back-text {
		font-size: 32rpx;
		color: #333;
	}

	.nav-title {
		font-size: 36rpx;
		font-weight: 600;
		color: #333;
	}

	.nav-right {
		width: 80rpx;
	}

	.login-content {
		padding: 40rpx;
	}

	.login-header {
		display: flex;
		flex-direction: column;
		align-items: center;
		margin-top: 60rpx;
		margin-bottom: 80rpx;
	}

	.logo {
		width: 150rpx;
		height: 150rpx;
		border-radius: 50%;
		background-color: #eee;
		margin-bottom: 30rpx;
	}

	.welcome-text {
		font-size: 48rpx;
		font-weight: bold;
		color: #333;
	}

	.login-form {
		background-color: #fff;
		border-radius: 20rpx;
		padding: 40rpx;
		margin-bottom: 40rpx;
	}

	.form-item {
		margin-bottom: 40rpx;
	}

	.item-label {
		display: block;
		font-size: 32rpx;
		color: #333;
		margin-bottom: 20rpx;
		font-weight: 500;
	}

	.item-input {
		width: 100%;
		height: 80rpx;
		border-bottom: 1rpx solid #e0e0e0;
		padding: 10rpx 0;
		font-size: 32rpx;
	}

	.form-options {
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin-bottom: 60rpx;
	}

	.remember-me {
		display: flex;
		align-items: center;
		font-size: 28rpx;
		color: #666;
	}

	.forgot-pwd {
		font-size: 28rpx;
		color: #007AFF;
	}

	.login-btn {
		width: 100%;
		height: 90rpx;
		background-color: #f0f0f0;
		color: #999;
		border-radius: 45rpx;
		font-size: 36rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		border: none;
	}

	.login-btn.active {
		background: linear-gradient(135deg, #6a11cb 0%, #2575fc 100%);
		color: #fff;
	}

	.divider {
		position: relative;
		text-align: center;
		margin: 60rpx 0;
	}

	.divider-text {
		position: relative;
		background-color: #fff;
		padding: 0 30rpx;
		font-size: 28rpx;
		color: #999;
		z-index: 1;
	}

	.divider:before {
		content: '';
		position: absolute;
		left: 0;
		top: 50%;
		width: 100%;
		height: 1rpx;
		background-color: #e0e0e0;
		transform: translateY(-50%);
	}

	.social-login {
		display: flex;
		justify-content: center;
		gap: 80rpx;
	}

	.social-item {
		display: flex;
		flex-direction: column;
		align-items: center;
	}

	.social-icon {
		font-family: 'iconfont';
		font-size: 60rpx;
		margin-bottom: 15rpx;
	}

	.social-text {
		font-size: 24rpx;
		color: #666;
	}

	.wechat .social-icon {
		color: #09BB07;
	}

	.qq .social-icon {
		color: #12B7F5;
	}

	.register-tip {
		text-align: center;
		font-size: 28rpx;
		color: #666;
	}

	.register-link {
		color: #007AFF;
		margin-left: 15rpx;
	}
</style>